* {
  box-sizing: border-box;
  font-size: 14px;
}

:focus {
  outline: none;
}

input:-webkit-autofill { // 覆盖输入框自动填充底色
  box-shadow: 0 0 0px 1000px #ffffff inset;
  -webkit-text-fill-color: #606266;
  caret-color: #606266;
}

font[size="1"] {
  font-size: 10px;
}
font[size="2"] {
  font-size: 13px;
}
font[size="3"] {
  font-size: 16px;
}
font[size="4"] {
  font-size: 18px;
}
font[size="5"] {
  font-size: 24px;
}
font[size="6"] {
  font-size: 32px;
}
font[size="7"] {
  font-size: 48px;
}

/* flex弹性盒布局兼容性写法样式文件
 * 常用类
 * display_flex
 * flex_direction_column
 * flex_wrap_wrap
 * justify_content_center
 * justify_content_space_between
 * justify_content_space_around
 * align_items_center
 * flex_grow_1
 * flex_shrink_0
*/

/* 
  设置在弹性容器上的属性
*/
.display_flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.display_inline_flex {
  display: -webkit-inline-flex;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* flex-direction属性决定主轴的方向（即项目的排列方向）  */
.flex_direction_row_reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex_direction_column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex_direction_column_reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/* 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行 */
.flex_wrap_nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex_wrap_wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex_wrap_wrap_reverse {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

/* justify-content属性定义了项目在主轴上的对齐方式 */
.justify_content_flex_start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.justify_content_flex_end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.justify_content_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.justify_content_space_between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.justify_content_space_around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

/* align-items属性定义项目在交叉轴上如何对齐 */
.align_items_flex_start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.align_items_flex_end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.align_items_center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.align_items_baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

/* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 */
.align_content_flex_start {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
.align_content_flex_end {
  -ms-flex-line-pack: end;
  align-content: flex-end;
}
.align_content_center {
  -ms-flex-line-pack: center;
  align-content: center;
}
.align_content_space_between {
  -ms-flex-line-pack: justify;
  align-content: space-between;
}
.align_content_space_around {
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

/*
  设置在弹性项目上的属性
*/

/*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。以下是兼容样式写法示例，可根据需要修改属性值。*/
.order_1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

/* flex为flex-grow、flex-shrink、flex-basis的合并项 */
.flex_auto {
  flex: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
.flex_none {
  flex: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

/* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。以下是兼容样式写法示例，可根据需要修改属性值 */
.flex_grow_1 {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。以下是兼容样式写法示例，可根据需要修改属性值 */
.flex_shrink_0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.flex_shrink_1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

/*
  flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
  它的默认值为auto，即项目的本来大小。以下是兼容样式写法示例，可根据需要修改属性值
*/
.flex_basis_100px {
  -ms-flex-preferred-size: 100px;
  flex-basis: 100px;
}

/* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
*/
.align_self_flex_start {
  -ms-flex-item-align: start;
  align-self: flex-start;
}
.align_self_flex_end {
  -ms-flex-item-align: end;
  align-self: flex-end;
}
.align_self_center {
  -ms-flex-item-align: center;
  align-self: center;
}
.align_self_baseline {
  -ms-flex-item-align: baseline;
  align-self: baseline;
}

/* 文本超出省略 */
// 单行省略
.text_els {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 多行省略，只适用于 -webkit- 内核的浏览器
.text_els_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 行数
}
.text_els_3 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 行数
}

// 自定义滚动条，只适用于 -webkit- 内核的浏览器
.scrollbar_default {
  overflow: auto;
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px; // 垂直滚动条的宽度
    height: 8px; //水平滚动条的高度
  }
  // 滚动条里面的滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    transition: color 0.2s ease;
    border-radius:5px; //圆角滑块
    // box-shadow: inset 0 0 5px rgba(204,204,204,0.2);
    // -webkit-box-shadow: inset 0 0 5px rgba(204,204,204,0.2);
  }
  // 滚动条里面轨道
  // &::-webkit-scrollbar-track {
  //   background: rgba(0, 0, 0, 0.1);
  //   border-radius: 0;
  //   box-shadow: inset 0 0 5px rgba(204,204,204,0.2);
  //   -webkit-box-shadow: inset 0 0 5px rgba(204,204,204,0.2);
  //   border-radius: 0; //轨道不含圆角
  // }
}